<template>
    <div class="city-picker">
        <el-select :size="size" v-model="province" placeholder="省份" @change="provinceChange">
            <el-option v-for="(value,key) in chinaArea['86']" :key="key" :label="value" :value="key"></el-option>
        </el-select>

        <el-select :size="size" v-model="city" placeholder="城市" @change="cityChange">
            <el-option v-for="(value,key) in cityList" :key="key" :label="value" :value="key"></el-option>
        </el-select>

        <el-select :size="size" v-model="area" placeholder="区/县" @change="areaChange">
            <el-option v-for="(value,key) in areaList" :key="key" :label="value" :value="key"></el-option>
        </el-select>

        <el-select v-if="isStreet" :size="size" v-model="street" placeholder="街道/乡镇" @change="streetChange">
            <el-option v-for="(value,key) in streetList" :key="key" :label="value" :value="key"></el-option>
        </el-select>
    </div>
</template>
<script>
// import chinaArea from 'chinaArea';

export default {
  name: 'cityPicker',
  props: ['areaSelected', 'isStreet', 'size'],
  model: {
    prop: 'areaSelected',
    event: 'change'
  },
  data () {
    return {
      chinaArea: chinaArea,
      lastArea: null,
      province: this.areaSelected[0] || '',
      city: this.areaSelected[1] || '',
      area: this.areaSelected[2] || '',
      street: this.areaSelected[3] || ''
    }
  },
  computed: {
    cityList () {
      return this.province ? this.chinaArea[this.province] : []
    },
    areaList () {
      return this.city ? this.chinaArea[this.city] : []
    },
    streetList () {
      return this.area ? this.chinaArea[this.area] : []
    }
  },
  watch: {
    areaSelected (val) {
      this.province = val[0]
      this.city = val[1]
      this.area = val[2]
      this.street = val[3]
    }
  },
  methods: {
    provinceChange (val) {
      const arr = [val]
      this.$emit('change', arr)
    },
    cityChange (val) {
      const arr = [this.province, val]
      this.$emit('change', arr)
    },
    areaChange (val) {
      const arr = [this.province, this.city, val]
      this.$emit('change', arr)
    },
    streetChange (val) {
      const arr = [this.province, this.city, this.area, val]
      this.$emit('change', arr)
    }
  }
}
</script>

<style scoped>
    .city-picker {
        display: inline-block;
    }

    /* .city-picker {
      display: block;
      font-size: 0;
      margin-bottom: 0;
    }
    .el-select {
      display: inline-block;
      width: 48%;
      font-size: 14px;
      margin: 0 1%;
    } */
</style>
